<template>
    <div class="flex flex-col h-full">
        <TitleBar class="absolute top-0 left-0 w-[450px]">今日进入数量</TitleBar>
        <div class="enter_num flex flex-col h-full">
            <div id="echarts_enterNmu" class="flex-1" style="height:100%"></div>
        </div>
    </div>
</template>
<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent } from 'vue';
import { debounce } from 'lodash';
import{gateEnterStatistics} from './api.js'
import TitleBar from '../components/TitleBar.vue'
export default defineComponent({
    components: {TitleBar},
    inject: ['villageId'],
    data(){
        return{
            myCharts:'',
            charts_options: {},
            enterNumerList:{
                sum:'223',
            },
            data1:[
                { value: '1150', name: '业主 (80%)' },
                { value: '153', name: '访客 (15%)' }
            ]
        }
    },
    mounted(){
        this.initChart1()
        this.setIntervalTotalFn()
    },
    destroyed(){
        clearInterval(this.timer);
        this.timer = null;
    },
    methods:{
        setIntervalTotalFn() {
            const villageId = this.villageId
            if (villageId) {
                this.gateEnterStatistics(villageId);
                this.timer = null;
                this.timer = setInterval(() => {
                    this.gateEnterStatistics(villageId);
                }, 20000);
            }
        },
        gateEnterStatistics(villageId) {
            // return
            gateEnterStatistics({ villageId: villageId}).then(res => {
                if (res.success) {
                    this.enterNumerList.sum = (res.data.residentCount+res.data.ownerCount) || 0;
                    this.data1[0].value = (res.data.ownerCount) || 0;
                    this.data1[1].value = (res.data.residentCount) || 0;
                    if(+this.data1[0].value == 0) {
                        this.data1[0].name = '业主(0%)'
                    } else {
                        this.data1[0].name = ('业主 ('+Math.round(this.data1[0].value/(this.enterNumerList.sum)*100) +'%)') || 0;
                    }

                    if(+this.data1[1].value == 0) {
                        this.data1[1].name = '访客(0%)'
                    } else {
                        this.data1[1].name = ('访客 ('+ Math.round(this.data1[1].value/(this.enterNumerList.sum)*100) +'%)') || 0;
                    }
                    this.initChart1()
                }
            })
        },
       initChart1(){
            let dom = document.getElementById("echarts_enterNmu");
            this.myCharts = echarts.init(dom);
            this.setLineChart(this.myCharts);
        }, 
        setLineChart(myCharts){
            myCharts.clear();
            let that = this;
            this.charts_options = {
            textStyle: {
                rich: {
                orgname: {
                    fontSize: 14,
                    width: 200,
                },
                count: {
                    fontSize: 16,
                    // verticalAlign: 'top',
                    align: 'center',
                    color: '#E0F7FF',
                },
                },
            },
            title: {
                show: true,
                text: that.enterNumerList.sum,
                subtext: "总量",
                textAlign: "center",
                top: "35%",
                left: "14%",
                itemGap:10,
                textStyle: {
                    fontSize: 20,
                    fontWeight: "400",
                    color: "#E1F7FF",
                    fontFamily: 'OPPOSans',
                    // textShadow: rgba(251, 229, 187, 0.4);
                    },
                subtextStyle: {
                color: "#E1F7FF",
                fontSize: 12,
                },
            },
            tooltip: {
                trigger: 'item',
                show: true
            },
            color: ['#2CA6FF', '#3DE6C9'],
            legend: {
                data: this.data1,
                orient: "vertical",
                selectedMode: true,
                bottom: '32%',
                y: 'center',
                x: '35%',
                itemGap: 16,
                // left: 'right',
                // icon: 'circle',
                itemHeight: 13,
                itemWidth: 13,
                textStyle: { //图例字体大小
                fontSize: 12,
                color: "#E0F7FF",
                // width: 50
                },
                formatter: function (name) {
                let target;
                let data1 = that.data1
                for (let i = 0; i < data1.length; i++) {
                    if (data1[i].name === name) {
                    target = data1[i].value
                    }
                }
                const arr = [
                    `{orgname|${name}}`,
                    `{count|${target}}`,
                ];
                return arr.join('');
                },
            },

            series: [
                {
                name: '',
                type: 'pie',
                hoverAnimation: false,
                radius: ['40%', '50%'],
                center: ["15%", "50%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderWidth: 1
                },
                label: {
                    show: false,
                    position: 'center',
                    formatter: '{b}' + "\n" + '{c}',
                },
                emphasis: {//hover之后中间内容
                    label: {
                    show: false,
                    fontSize: '12',
                    lineHeight: 24,
                    color: "#fff",
                    formatter: '{num|{c}}' + "\n" + '{b}',
                    rich: {
                        num: {
                        fontSize: '20',
                        fontFamily: 'number',
                        }
                    }
                    }
                },
                labelLine: {
                    show: false
                },
                data: this.data1
                }
                ]
};
            myCharts.setOption(this.charts_options);
            const f = debounce(function () {
                if (myCharts.isDisposed()) {
                    window.removeEventListener('resize',f)
                } else {
                    myCharts.resize();
                }
            }, 500)
            window.addEventListener('resize', f)
            this.myCharts = myCharts;
        }
    }
})

</script>

<style scoped lang="scss">
.enter_num{
    display: flex;
    height: 80%;
    margin-left: -15px;
    #echarts_enterNmu{
        flex: 1.5;
        align-items: center;
        height: 100%;
        width: 100%;
        background: url("./assets/deviceBg.png") 10%/12% no-repeat;
    }
  
}
</style>